<template>
  <div id="trainingList">
    <Breadcrumb content="培训列表" />
    <div class="bodyContent">
      <Splitpanes class="area">
        <Pane size="100">
          <el-tabs type="border-card" @tab-click="tabHandleClick" v-model="activeName">
            <el-tab-pane label="培训模式" name="firstTab">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input style="width: 180px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getTrainingList" @search-click="getTrainingList"></vxe-input>
                  <vxe-button type="text" icon="vxe-icon-refresh" class="button-blue" content="刷新" @click="getTrainingList" :loading="showLoading"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="trainingBox">
                <vxe-table ref="trainingTableRef" :loading="showLoading" class="mytable-scrollbar" border align="left" height="auto" :keep-source="true" :data="trainingList" :row-config="{ isCurrent: true, isHover: true }" resizable show-overflow @current-change="currentChangeEvent">
                  <vxe-column type="seq" title="序号" align="center" width="30"></vxe-column>
                  <vxe-column field="trainingName" title="培训主题">
                    <template #default="{ row }">
                      <!-- <router-link :to="{ path: '/trainingview', query: { param1: row.id, param2: activeName } }"> -->
                      <a href="" @click.prevent="handleJump(row)">{{ row.trainingName }}</a>
                      <!-- </router-link> -->
                    </template>
                  </vxe-column>
                  <vxe-column field="address" title="培训地点"> </vxe-column>
                  <vxe-column field="trainingType" title="培训方式" :formatter="formatterType"> </vxe-column>
                  <vxe-column field="trainingDate" title="培训时间"></vxe-column>
                  <vxe-column field="endDate" title="培训结束时间"> </vxe-column>
                  <vxe-column field="sysUserList" title="参与人员">
                    <template #default="{ row }">
                      <el-tag size="small"> {{ row.sysUserList && row.sysUserList.length > 0 ? row.sysUserList.map((item) => item.realname).join(',') : '' }}</el-tag>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="人员模式" name="secondTab"> <TrainingUserList></TrainingUserList> </el-tab-pane>
            <el-tab-pane label="知识模式" name="thirdTab"><TrainingKnowledgeList></TrainingKnowledgeList></el-tab-pane>
          </el-tabs>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import TrainingUserList from './TrainingUserList.vue'; //人员模式
import TrainingKnowledgeList from './TrainingKnowledgeList.vue'; //知识模式
import type { TabsPaneContext } from 'element-plus'; //页签el-tabs

let { proxy }: any = getCurrentInstance();
//关键字查询
let searchForm = reactive({
  searchValue: '',
  year: null
});
let showLoading = ref(false); //表格加载状态
let trainingList = reactive([]); //表格培训数据
const typeOptions = reactive([
  {
    name: '线下培训',
    value: 0
  },
  {
    name: '线上培训',
    value: 1
  }
]);

let jumpCurrentNodeDataId: any = ref(null); //跳转前点击的节点数据

let activeName: any = ref('firstTab'); //第一个页签

// 方法定义区 =============================================================
onMounted(() => {
  activeName.value = localStorage.getItem('traingingTab');
  getTrainingList();
});

// 获取培训列表信息
function getTrainingList() {
  showLoading.value = true;
  trainingList.length = 0;
  const url = '/wk/training/plan/getTrainingPlanList';
  proxy.$http
    .get(url, { params: { keyWord: searchForm.searchValue, status: 1 } })
    .then((res: any) => {
      if (res.data && res.data.length > 0) {
        trainingList.push(...res.data);
        const $xTable = proxy.$refs.trainingTableRef as any;
        proxy.$nextTick(() => {
          jumpCurrentNodeDataId = localStorage.getItem('jumpCurrentNodeStore');
          let tabNumber = localStorage.getItem('traingingTab');
          if ($xTable) {
            if (tabNumber === 'firstTab') {
              if (jumpCurrentNodeDataId) {
                let dataIndex = 0;
                trainingList.forEach((item: any) => {
                  if (item.id === jumpCurrentNodeDataId) {
                    dataIndex = trainingList.indexOf(item);
                  }
                });
                $xTable.setCurrentRow(trainingList[dataIndex]);
                currentChangeEvent({ row: trainingList[dataIndex] });
                localStorage.setItem('jumpCurrentNodeStore', ''); //删除本地的跳转记录节点id
              } else {
                $xTable.setCurrentRow(trainingList[0]);
                currentChangeEvent({ row: trainingList[0] });
              }
            }
          }
        });
      }
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}
// 处理跳转
 function handleJump(row) {
  currentChangeEvent({ row: row });
  proxy.$router.push({ path: '/trainingview', query: { param1: row.id, param2: activeName.value } }); // 跳转路由
}

// 表格行点击事件
function currentChangeEvent(row: any) {
  jumpCurrentNodeDataId = row.row.id;
  localStorage.setItem('jumpCurrentNodeStore', jumpCurrentNodeDataId);
}

// 格式化培训方式 根据数值返回名字
function formatterType({ cellValue }) {
  const item = typeOptions.find((item) => item.value === cellValue);
  return item ? item.name : '';
}

// 页签切换事件
function tabHandleClick(tab: TabsPaneContext) {
  activeName.value = tab.props.name;
  localStorage.setItem('traingingTab', activeName.value); //将点击的页签存储到本地
  if (activeName.value === 'firstTab') {
    getTrainingList(); //切回到第一个页签时  调用方法
  }
}
</script>

<style lang="scss" scoped>
#trainingList {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .area {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .trainingBox {
        height: calc(100% - 40px);
      }
      .el-tabs {
        height: 100%;
        :deep(.el-tabs__content) {
          padding: 0;
          height: calc(100% - 39px);
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
